<div class="input-group">
  <h3 class="first">Addons</h3>
  <div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <span class="ui-inputgroup-addon">
          <i class="fa fa-user"></i>
        </span>
        <input type="text" pInputText placeholder="Username">
      </div>
    </div>

    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <span class="ui-inputgroup-addon">$</span>
        <input type="text" pInputText placeholder="Price">
        <span class="ui-inputgroup-addon">.00</span>
      </div>
    </div>

    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <span class="ui-inputgroup-addon">www</span>
        <input type="text" pInputText placeholder="Website">
      </div>
    </div>
  </div>

  <h3>Multiple Addons</h3>
  <div class="ui-g">
    <div class="ui-g-12">
      <div class="ui-inputgroup">
        <span class="ui-inputgroup-addon">
          <i class="fa fa-credit-card"></i>
        </span>
        <span class="ui-inputgroup-addon">
          <i class="fa fa-cc-visa"></i>
        </span>
        <input type="text" pInputText placeholder="Price">
        <span class="ui-inputgroup-addon">$</span>
        <span class="ui-inputgroup-addon">.00</span>
      </div>
    </div>
  </div>

  <h3>Button Addons</h3>
  <div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <button pButton type="button" label="Search"></button>
        <input type="text" pInputText placeholder="Keyword">
      </div>
    </div>

    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <input type="text" pInputText placeholder="Keyword">
        <button pButton type="button" icon="fa-superpowers" class="ui-button-secondary"></button>
      </div>
    </div>

    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <button pButton type="button" icon="fa-check" (click)="addons3.value = randomWords()" class="ui-button-success"></button>
        <input type="text" #addons3 pInputText placeholder="Vote">
        <button pButton type="button" icon="fa-close" (click)="addons3.value=''" class="ui-button-danger"></button>
      </div>
    </div>
  </div>

  <h3>Checkbox and RadioButton</h3>
  <div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <span class="ui-inputgroup-addon">
          <p-checkbox></p-checkbox>
        </span>
        <input type="text" pInputText placeholder="Username">
      </div>
    </div>

    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <input type="text" pInputText placeholder="Price">
        <span class="ui-inputgroup-addon">
          <p-radioButton></p-radioButton>
        </span>
      </div>
    </div>

    <div class="ui-g-12 ui-md-4">
      <div class="ui-inputgroup">
        <span class="ui-inputgroup-addon">
          <p-checkbox></p-checkbox>
        </span>
        <input type="text" pInputText placeholder="Website">
        <span class="ui-inputgroup-addon">
          <p-radioButton></p-radioButton>
        </span>
      </div>
    </div>
  </div>
</div>
